<template>
    <div class="content">
       <ul>
           <li v-for="(item, index) in dataList" :key="item.id">
               <span class="circle">{{index+1}}</span>
               <div class="txt">{{item.title}}</div>
               <Button type="primary" @click="toUp(item.id)">向上一级</Button>
               <Button type="primary" v-if="index>0" @click="placeTop(item.id)">置顶</Button>
           </li>
       </ul>
    </div>
</template>
<script>
import { appletGetAll, appletPlaceTop, appletUp } from "@/api/index"
export default {
    data() {
        return {
            dataList: []
        }
    },
    created() {
        this.getData()
    },
    methods: {
        placeTop(id) {
            console.log(this)
            appletPlaceTop({id}).then(res => {
                console.log(res)
                if(res.success) {
                    this.getData()
                }
            })
        },
        toUp(id) {
            appletUp({id}).then(res => {
                console.log(res)
                if(res.success) {
                    this.getData()
                }
            })
        },
        getData() {
            appletGetAll().then(res => {
                if(res.success) {
                    this.dataList = res.result
                }
            }) 
        }
    }
}
</script>
<style lang="less">
    .content{
        ul{
            padding-top: 30px;
            padding-left: 30px;
            li{
                display: flex;
                align-items: center;
                font-size: 18px;
                height: 50px;
                .circle{
                    width: 30px;
                    height: 30px;
                    border: 1px solid #999;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 30px;
                    font-size: 14px;
                    margin-right: 15px;
                }
                .txt{
                   height: 32px;
                   line-height: 32px;
                   width: 120px;
                   border: 1px solid #999;
                   border-radius: 4px;
                   text-align: center;
                   background-color: #fff;
                   margin-right: 15px;
                }
                button{
                    margin-right: 15px;
                }
            }
        }
    }
</style>